<template>
  <Dialog :appDialog="appDialog">
    <el-form>
      <el-form-item label="公众号" class="item_margin">
        <el-select style="width: 100%" v-model="form.official_account_ids" :multiple="true">
          <el-option v-for="item in state.list" :key="item.id" :value="item.id" :label="item.nick_name" />
        </el-select>
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<script setup lang="ts">
  import Dialog from '@/components/Dialog.vue'
  import { officialSync } from '@/api/content/channelFootage/officialaccountgraphics'
  import { getOfficeAccountList } from '@/api/channelconfig/officeAccount'

  import { reactive, ref, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  const emit = defineEmits(['submit'])
  const state = reactive({
    list: []
  })
  const form = reactive({
    sync_type: 2,
    official_account_ids: []
  })

  // 取消
  const onCancel = () => {
    appDialog.visible = false
    form.official_account_ids = []
  }
  // 确定
  const onSubmit = async () => {
    if (!form.official_account_ids.length) {
      ElMessage.warning('请选择同步公众号')
      return
    }
    const res = await officialSync(form)
    onCancel()
    emit('submit', res)
    ElMessage.success('同步公众号成功')
  }

  // 获取公众号列表
  const getList = async () => {
    let params = { page: 1, page_size: 100, verify_type_info: 0 }
    const res: any = await getOfficeAccountList(params)
    state.list = res.data
  }
  const appDialog = reactive({
    visible: false,
    title: '同步公众号图文',
    width: '500px',
    cancel: onCancel,
    submit: onSubmit,
    cancelText: '取消',
    submitText: '确定'
  })
  watch(
    () => appDialog.visible,
    (v) => {
      v && getList()
    }
  )

  defineExpose({
    appDialog
  })
</script>

<style scoped lang="scss">
  .item_margin {
    margin: 10px 0 50px;
  }
</style>
